<template>
  <div class="zmForms">
    <!-- {{itemColumns}}
    {{form}}
    {{formRules}} -->
    <zm-form v-bind="$attrs" v-on="$listeners" :model="form" :rules="formRules">
      <template v-for="(item, index) in itemColumns">
        <span :key="index" v-if="item.keyName">
          <el-form-item
            :label="item.label || ''"
            :prop="item.keyName"
          >
            <component
              :is="map[item.type]"
              v-bind="item.props"
              v-model="form[item.keyName]"
            ></component>
          </el-form-item>
        </span>
          <slot v-if="item.slotName !== ''" :name="item.slotName" />
      </template>
      <slot />
    </zm-form>
  </div>
</template>

<script>
export default {
  name: 'ZmForms',
  props: {
    // 传表单项各种属性
    itemColumns: {
      type: Array,
      default: () => {
        return []
      }
    },
    // v-model绑定的对象
    form: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      map: {
        'input': 'zm-input',
        'select': 'zm-data-select',
        'radio': 'zm-data-radio',
        'checkbox': 'zm-data-checkbox',
        'date': 'zm-date-picker',
        'button': 'zm-button'
      }
    }
  },
  computed: {
    formRules () {
      const formRules = {}
      this.itemColumns.forEach(item => {
        if (item.keyName !== '' && item.isActiveRules) {
          formRules[item.keyName] = [ { required: true, message: '请输入', trigger: 'blur' } ]
        }
      })
      return formRules
    }
  },
  created () {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
</style>
